<template>
	<view>
		<uni-popup ref="speci" type="bottom" zindex border-radius="16rpx 16rpx 0 0" @maskClick="maskClick">
			<view class="pu_content">
				<view class="cont_top p_rlt">
					<view v-if="spcData.isTaoCan&&spcData.fReplace" class="replacebx text-center padding-top-sm" @click.stop="tapReplaceGoods">
						<view class="text-ngreen text-lg"><text class="fcon-a-2"></text></view>
						<view class="text-ngreen">换一个</view>
					</view>
					<view class="mains_imgs">
						<!-- <tb-image width="150rpx" height="150rpx" borderRadius="10rpx"
							:src="env.imgBaseUrl+spcData.img">
							<template v-slot:error>
								<image src="../../../static/menuEmpty.png" class="msimg" mode="aspectFill">
								</image>
							</template>
						</tb-image> -->
						<image class="msimg" :src="env.imgBaseUrl+spcData.img" mode="aspectFill"></image>
					</view>
					<view class="mains_names">{{spcData.name||''}}</view>
				</view>
				<view class="mains_numbox">
					<!-- :min="spcData.isMust?spcData.sminNums:0" -->
					<!-- <uni-number-box  v-model="spcData.nums" :min="spcData.sminNums||0" :nstash="spcData.nums>0&&spcData.nums>=spcData.sminNums" :step="spcData.nums<=0?spcData.sminNums:1"  :max="spcData.smaxNums"  :width="100" :allowInput="true" fontSize="66rpx" margin="0 200rpx" inputFontSize="36rpx" inputFontWeight="700"/> -->
					<uni-number-box v-model="spcData.nums"  @changes="changeNum" :min="spcData.isMust?spcData.sminNums:0" :nstash="spcData.nums>0&&spcData.nums>=spcData.sminNums" :step="spcData.nums<=0?spcData.sminNums:1" :max="maxNum" :width="100" :allowInput="true" fontSize="66rpx" margin="0 200rpx" inputFontSize="36rpx" inputFontWeight="700"/>
				</view>
				<view class="foot_btns padding-lr-sm">
					<view class="flex-sub">
						<view v-if="!spcData.isMust" class="btns canesl point margin-right-xl" @click.stop="delItem">删除</view>
					</view>
					<view class="btns submits point" @click.stop="confirm">确定</view>	
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { useShopStore } from '@/stores/shopStore';
	import { useCartStore } from '@/stores/cartStore';
	import { mnavTo } from '@/utils/helper';
	// import {  } from '@/api/vmeitime-http/index.js'
	import { env } from '@/api/env.js';
	import mapi from '@/utils/mapi';
	// const shopStore = useShopStore();
	// const cartStore = useCartStore();
	
	const props = defineProps({
		actionfn: Function || null
		
	});
	const emit = defineEmits(['maskClick', 'confirm','change','delItem'])
	const speci = ref();
	const maxNum = ref(0);
	// const cdata = ref()
	// const imgBaseUrl = ref("https://cdn-static.yekjx.com/food/images/")
	const spcData = ref<any>({
		// vname: "",
		// list: [],
	})
	// const imgBaseUrl = ref(env.imgBaseUrl);
	onMounted(() => {
		// cdata.value = props.data
	})
	const curGoodsNums = ref(0);
	const open = (v:any,max:any) => {
		console.log(v, "store.cartInfo")
		curGoodsNums.value = v.nums||0;
		maxNum.value = max;
		// spcData.value.list = [];
		// spcData.value.vname=v.name
		// spcData.value.imgUrls=v.img
		// spcData.value.num=v.num
		
		spcData.value = v||{};
		speci.value.open()
	}
	const changeNum = (e:any)=>{
		console.log('spcmd',e)
	}
	const tapReplaceGoods = ()=>{
		// console.log('spcData.value',spcData.value)
		// let nprice = shopStore.costPlan == '1130' ? spcData.value.sxp_site_sell_price : spcData.value.sxp_out_sell_price;
		if(!spcData.value.nprice){
			return;
		}
		props.actionfn({source:'replace',goodsItem:spcData.value});
		close();
		mnavTo('/pages/order/moreMeal/moreMeal?isReplace=' + spcData.value.nprice + '&replaceGood=' + spcData.value.sku + '&replaceMaxNums=' + spcData.value.nums );
	}
	
	const confirm = (e : any) => {
		console.log(spcData.value, "confirm.value")
		spcData.value.nums<=0?emit("delItem",{sku:spcData.value.sku}):emit("confirm",spcData.value);
		close()
	}
	const delItem = (e : any) => {
		emit("delItem",{sku:spcData.value.sku})
		close()
	}
	
	const maskClick = (e : any) => {
		spcData.value.nums = curGoodsNums.value;
		emit("maskClick")
	}


	const close = () => {
		speci.value.close()
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.pu_content {
		width: 100vw;
		min-height: 344rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		padding: 0rpx 30rpx;
		background: #FFF;
		padding-bottom: 40rpx;
		.replacebx{
			position: absolute;
			right: -6rpx;
			top: 0;
			width: 120rpx;
			height: 100rpx;
		}
		.cont_top{
			display: flex;
			width: 100%;
				.mains_imgs{
					width: 150rpx;
					height:150rpx;
					margin-top: -35rpx;
					border-radius: 10rpx;
					background-color: #fafafa;
					border: 6rpx solid rgba(83, 168, 127, 0.50);
				}
				
				.mains_names{
					color: #333;
					font-size: 36rpx;
					font-weight: 400;
					margin-left: 10rpx;
					width: 520rpx;
					// max-height: 92rpx;
					overflow: hidden;
					margin-top:25rpx;
					padding-right:100rpx;
				}
		}
			.mains_numbox{
				width: 90vw;
				height:100rpx;
				border-radius: 114rpx;
				background: #FAFAFA;
				display:flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx auto;
			}
			.foot_btns{
				min-height:80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				.btns{
					width: 304rpx;
					height:80rpx;
					border-radius: 10rpx;
					font-size: 32rpx;
					text-align: center;
					line-height: 80rpx;
					&.canesl{
						border: 2rpx solid #5DB175;
						color:#5DB175;
					}
					&.submits{
						background: #5DB175;
						color:#fff;
					}
				}
			}
	}
	.msimg{
		width: 138rpx;
		height:138rpx;
		border-radius: 10rpx;
	}
</style>